<template>
  <page-header-wrapper>
    <a-card :bordered="false">
      <a-form :form="form">
        <a-form-item label="门头照">
          <!--   <a-upload list-type="picture-card" class="avatar-uploader" :show-upload-list="false"
            :action="aliOssConfig.uploadUrl" :before-upload="beforeUpload" :data="formData" @change="handleChange"
            v-decorator="['logo', { rules: [{ required: true, message: '请上传logo！' }] }]">
            <img style="width: 100%" v-if="imageUrl" :src="imageUrl" alt="avatar" />
            <div v-else>
              <a-icon :type="loading ? 'loading' : 'plus'" />
              <div class="ant-upload-text">Upload</div>
            </div>
          </a-upload> -->
          <uploadBox ref='upload' @success='uploadSuccess'
            v-decorator="['logo', { rules: [{ required: true, message: '请上传logo！' }] }]"></uploadBox>
        </a-form-item>

        <a-form-item label="二维码">
          <img style="width: 100px;height: 100px;" v-if="erweima" :src="erweima" alt="avatar" />
        </a-form-item>


        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-item label="手机号(登录帐号)">
              <a-input disabled v-decorator="['phone',{ rules: [{ required: true, message: '请输入手机号' }] }]"
                placeholder="" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="药房名称 ">
              <a-input disabled v-decorator="['name',{ rules: [{ required: true, message: '请输入药房名称' }] }]"
                placeholder="" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="省市区 ">
              <a-cascader disabled :field-names="{ label: 'name', value: 'id', children: 'List' }"
                v-decorator="['region',{ rules: [{ required: true, message: '请选择省市区' }] }]" :options="regionOptions"
                placeholder="请选择" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="详细地址 ">
              <a-input disabled v-decorator="['area',{ rules: [{ required: true, message: '请输入详细地址' }] }]"
                placeholder="" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="邮箱">
              <a-input v-decorator="['email',{ rules: [{ required: true, message: '请输入邮箱' }] }]" placeholder="" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="开户行 ">
              <a-input v-decorator="['khh',{ rules: [{ required: true, message: '请输入开户行' }] }]" placeholder="" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="银行卡号 ">
              <a-input v-decorator="['bankid',{ rules: [{ required: true, message: '请输入银行卡号' }] }]" placeholder="" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="开户名称 ">
              <a-input v-decorator="['bankname',{ rules: [{ required: true, message: '请输入开户名称' }] }]" placeholder="" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="开户预留手机号 ">
              <a-input v-decorator="['bankphone',{ rules: [{ required: true, message: '请输入开户预留手机号' }] }]"
                placeholder="" />
            </a-form-item>
          </a-col>
          <a-col :span="24">
            <a-form-item label="">
              <a-button key="submit" type="primary" :loading="loading" @click="submit">保存</a-button>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </a-card>
  </page-header-wrapper>
</template>

<script>
  import uploadBox from '@/components/obsUpload/obsUpload'
  import {
    pharmacyAdd,
    regionList,
    pharmacysUpdate,
    pharmacyDetail
  } from '@/api/pharmacys'
  import {
    getFormData
  } from '@/utils/aliOss/aliossUpload.js'
  import aliOssConfig from '@/utils/aliOss/config'
  const formItemLayout = {
    labelCol: {
      span: 4
    },
    wrapperCol: {
      span: 8
    },
  };
  const formTailLayout = {
    labelCol: {
      span: 4
    },
    wrapperCol: {
      span: 8,
      offset: 4
    },
  };

  export default {
    components: {
      uploadBox
    },
    props: {
      visible: {
        type: Boolean,
        required: true,
      }
    },
    data() {
      return {
        erweima: '',
        checkNick: false,
        formItemLayout,
        formTailLayout,
        form: this.$form.createForm(this),
        loading: false,
        imageUrl: '',
        formData: {},
        aliOssConfig: aliOssConfig,
        id: 0,
        updateflag: false,
        regionOptions: []
      };
    },
    mounted() {
      this.getInfo()
      this.getRegion()
    },
    methods: {
      // 上传图片成功
      uploadSuccess(v) {
        let values = this.form.getFieldsValue();
        values.logo = v
        this.form.setFieldsValue(values);
        this.imageUrl = v
      },
      getInfo() {
        pharmacyDetail({
          id: parseInt(this.$store.getters.id),
        }).then(res => {
          this.erweima = res.data.erweima
          this.setUpdate(res.data)
        })
      },
      getRegion() {
        regionList().then(res => {
          this.regionOptions = res.data
        })
      },
      cancelAdd() {
        this.updateflag = false
        this.$emit('cancel', true)
        this.form.resetFields()
        this.imageUrl = ''
        this.$refs.upload.imageUrl = ''
      },
      setUpdate(formValue) {
        var that = this
        that.imageUrl = formValue.logo
        var image = {
          url: formValue.logo,
          name: new Date().getTime(),
          status: 'done',
          uid: (((1 + Math.random()) * 0x10000) | 0).toString(16),
        }
        this.updateflag = true
        this.id = formValue.id

        let province = ''
        let city = ''
        let county = ''
        this.regionOptions.forEach(p => {
          if (p.name == formValue.province) {
            province = p.id
            p.List.forEach(c => {
              if (c.name == formValue.city) {
                city = c.id
                c.List.forEach(e => {
                  if (e.name == formValue.county) {
                    county = e.id
                  }
                })
              }
            })
          }
        })
        this.$refs.upload.imageUrl = formValue.logo
        that.form.setFieldsValue({
          region: [province, city, county],
          name: formValue.name,
          phone: formValue.phone,
          pwd: formValue.pwd,
          email: formValue.email,
          province: formValue.province,
          city: formValue.city,
          county: formValue.county,
          area: formValue.area,
          cityid: formValue.cityid,
          logo: formValue.logo,
          khh: formValue.khh,
          bankid: formValue.bankid,
          bankname: formValue.bankname,
          bankphone: formValue.bankphone,
          retion: [province, city, county],
          state: formValue.state
        })
      },
      submit() {
        var that = this
        const {
          form: {
            validateFields
          },
        } = this

        validateFields((errors, values) => {
          if (!errors) {
            this.loading = true
            let province = ''
            let city = ''
            let county = ''
            this.regionOptions.forEach(p => {
              if (p.id == values.region[0]) {
                province = p.name
                p.List.forEach(c => {
                  if (c.id == values.region[1]) {
                    city = c.name
                    c.List.forEach(e => {
                      if (e.id == values.region[2]) {
                        county = e.name
                      }
                    })
                  }
                })
              }
            })
            values.logo = that.imageUrl;
            values.province = province
            values.city = city
            values.county = county
            values.cityid = values.region[1]
            values.id = this.id
            pharmacysUpdate({
              ...values,
            }).then((res) => {
              if (res.code == 0) {
                this.loading = false
                this.$message.success('保存成功')
              }
            })
          }
        })
      },
      beforeUpload(file) {
        this.formData = getFormData()
        const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png'
        if (!isJpgOrPng) {
          this.$message.error('请上传图片类型文件!')
        }
        const isLt2M = file.size / 1024 / 1024 < 2
        if (!isLt2M) {
          this.$message.error('图片最大体积为2MB!')
        }
        return isJpgOrPng && isLt2M
      },
      check() {
        this.form.validateFields(err => {
          if (!err) {
            console.info('success');
          }
        });
      },
      handleChange(info) {
        if (info.file.status === 'uploading') {
          this.loading = true
          return
        }
        if (info.file.status == 'done') {
          this.imageUrl = this.aliOssConfig.uploadUrl + '/' + this.formData.key
          this.loading = false
        }
      },
    },
  };
</script>